import React, { useState, useEffect } from "react";
import { Form, Input, Select, Button, Table, Space, message } from "antd";

import api from '../../../api'
const Agent = () => {
    let [data, setData] = useState()
    // dom渲染后 componentDidMount
    useEffect(() => {
        getData()
    }, [])
    const getData = async () => {
        const { data: res } = await api.getAgentTable()
        console.log(res);
        res.data = res.data.filter(item => {
            return item.key = item.middlemanID
        })
        setData([...res.data])
    }

    const { form } = Form.useForm(),
        { Option } = Select,
        columns = [{
            title: "序号",
            dataIndex: "middlemanID",
            key: "middlemanID",
            align: 'center'
        },
        {
            title: "姓名",
            dataIndex: "middlemanName",
            key: "middlemanName",
            align: 'center'
        },
        {
            title: "手机号",
            key: "middlemanPhone",
            dataIndex: "middlemanPhone",
            align: 'center'
        },
        {
            title: "公司",
            dataIndex: "Company",
            key: "Company",
            align: 'center'
        },
        {
            title: "新房",
            dataIndex: "newHours",
            key: "newHours",
            align: 'center'
        },
        {
            title: "二手房",
            dataIndex: "oldHours",
            key: "oldHours",
            align: 'center'
        },

        {
            title: "租房",
            dataIndex: "rentingHours",
            key: "rentingHours",
            align: 'center'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
            render: (text) => (<span>{text ? '在职' : '离职'}</span>)
        },
        {
            title: "操作",
            key: "action",
            align: 'center',
            render: (text, record) => (
                <Space>
                    <Button type='text'>编辑</Button>
                    <Button type='text' onClick={() => { delItem(record.middlemanID) }}>删除</Button>
                    <Button type='text'>启用</Button>
                    <Button type='text'>禁用</Button>
                </Space>
            ),
        },]
    // 删除
    const delItem = async (middlemanID) => {
        const { data: res } = await api.delAgentItem({ middlemanID })
        message.success(res.msg)
        getData()
    }
    const onGenderChange = () => { };
    return (
        <div>
            <p className="header_title">经纪人管理</p>
            <div className="order_main">
                <Form layout="inline" form={form}>
                    <Form.Item label="搜索：">
                        <Input placeholder="请输入经纪人姓名/手机号" />
                    </Form.Item>
                    <Form.Item label="订单类型：">
                        <Select placeholder="请选择" onChange={onGenderChange} allowClear>
                            <Option value="male">请选择</Option>
                            <Option value="female">在职</Option>
                            <Option value="other">离职</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item>
                        <Button>查询</Button>
                        <Button type='primary' style={{ marginLeft: '10px' }}>新建</Button>
                    </Form.Item>
                </Form>
                <Table bordered columns={columns} dataSource={data} />
            </div>
        </div>
    );
};

export default Agent;
